<template>
  <div class="app-mpicker">
    <van-row>
      <van-col span="8" class="app-picker-label">
        <span v-if="!allowEmpty" class="stars" style="color:red;">*</span>
        {{labelText}}
      </van-col>
      <van-col span="16" class="app-picker-content">
        <div v-for="(item,index) in curValue" :key="index" style="margin-right:5px;margin-top:2px;">
          <van-tag
            type="primary"
            size="medium"
            :closeable="true"
            @close="remove(item)"
          >{{item.srfmajortext}}</van-tag>
        </div>
        <div class="app-picker-icon"><van-icon name="search" @click="openModal" /></div>
      </van-col>
    </van-row>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Provide,
  Emit,
  Watch
} from "vue-property-decorator";

@Component({
  components: {}
})
export default class AppMPicker extends Vue {
  /**
   * 输入值
   * @type any
   * @memberof AppMPicker
   */
  @Prop() public value?: any;

  get curValue() {
    if (this.value) {
      if (this.value instanceof Array) {
        return this.value;
      } else if (typeof this.value === "string") {
        try {
          return JSON.parse(this.value);
        } catch (error) {
          console.error(error);
        }
      }
    } else {
      return [];
    }
  }

  set curValue(val: any) {
    if (!val) {
      this.$emit("valuechange", null);
    } else {
      this.$emit("valuechange", JSON.stringify(val));
    }
  }

  /**
   *  标签label
   * @type string
   * @memberof AppMPicker
   */
  @Prop() public labelText?: string;

  /**
   *  是否允许为空
   * @type boolean
   * @memberof AppMPicker
   */
  @Prop() public allowEmpty?: boolean;

  /**
   * 输入值
   * @type boolean
   * @memberof AppMPicker
   */
  @Prop() public disabled?: boolean;

  /**
   * 空白提示信息
   * @type string
   * @memberof AppMPicker
   */
  @Prop() public placeholder?: string;

  /**
   * 视图名称
   * @type string
   * @memberof AppMPicker
   */
  @Prop() public viewname?: string;

  /**
   * 打开模态
   *
   * @memberof AppMPicker
   */
  public openModal() {
    if (this.viewname) {
      let modalSubject = this.$modal({
        componentName: this.viewname,
        selectedData: this.curValue
      }).show();
      modalSubject.subscribe((res: any) => {
        if (res) {
          console.log(res);
          this.curValue = res;
        }
      });
    } else {
      console.log("选择视图未配置");
    }
  }

  /**
   * 删除单个数据项
   *
   * @memberof AppMPicker
   */
  public remove(value: any) {
    if (this.disabled) {
      return;
    }
    this.curValue = this.curValue.filter((item:any) =>{
        return item.srfkey !== value.srfkey;
    })
  }
}
</script>
<style lang="less">
.app-mpicker {
  .app-picker-label {
    text-align: left;
  }
  .app-picker-content {
    position: relative;
    display: flex;
    justify-content: normal;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 16px;
    .app-picker-icon {
        position: absolute;
        top: 0px;
        right: 0px;
    }
  }
}
</style>